import { Component } from 'react'
import { Link } from 'react-router-dom'
import Head from '../components/Head';
// 类组件 需要通过一个  react-redux 提供的高阶组件 connect 来获取store全局状态
import { connect } from 'react-redux'

import { getVersion } from '../store/dispatch'
 
class Home extends Component {


    changeVersion = ()=>{
        // 执行 dispatch 就是执行 redux当中的store 的reducer函数 目的是为了更新全局状态
        // dipatch传入的是一个 action对象
        // 一般 action对象当中 除了type以外  还可以携带其他的参数 但是......
        //  开发过程当中习惯性的 其他参数 都挂载在 payload(载荷)属性上
        //  this.props.dispatch({type:'abc',a:1,b:2}); 可以传递 a:1 b:2
        // 默认 dispatch 执行的是同步修改
        // this.props.dispatch({type:'setVersion',payload:'2.0.0'});   // 推荐使用
        
        // 在引入了 thunk中间件之后  可以执行一个异步的修改 
        // 使用thunk我们可以在dispatch当前 传入一个 函数 ，该函数会得到一个 dispatch参数方便在函数内部执行完
        // 异步操作之后 调用dispatch
        this.props.dispatch(getVersion)

    }

    render(){
        console.log('this.props',this.props)  // 当我们使用connect 之后 this.props上面 就会挂载一个dispatch方法
        return (
            <div>
                <Head />
                  我是首页  
                  <div>当前获取的全局状态 { JSON.stringify(this.props)  }</div>
                  <button onClick={ this.changeVersion }> 让store的 reducer函数执行 </button>
                {/* 重新打开一个链接 */}
                <div><a href="/list">跳转到列表页 传统方式的a 跳转</a></div>  
                {/* 只是修改链接 从而让 react-router 根据这个链接的变化重新渲染对应的组件  */}
                <div><Link to="list?a=1&b=2" state={{c:3,d:4}}>跳转到列表页 Link 跳转</Link></div>  

            </div>   
        )
    }
}



//  mapStateToProps 语义上 遍历出store供应的全局状态到组件的props上
// 这个函数是作为 connect的第一个参数
const mapStateToProps  = (state)=>{
    // mapStateToProps 这个函数会得到一个 当前的全局状态的参数
    
    // 这个函数 返回什么值  什么值就会挂载到 组件的props上面
    return {...state}  // 需要返回一个新的对象
}

// connect的使用 
export default connect(mapStateToProps)(Home);